var left = document.getElementsByClassName("left")[0];
var arrow_left = left.getElementsByTagName("img")[0];
var right = document.getElementsByClassName("right")[0];
var arrow_right = right.getElementsByTagName("img")[0];

arrow_left.onmouseover = function() {
	arrow_left.src = "img/arrow_left_red.png";
}

arrow_left.onmouseout = function() {
	arrow_left.src = "img/arrow_left.png";
}

arrow_right.onmouseover = function() {
	arrow_right.src = "img/arrow_right_red.png";
}

arrow_right.onmouseout = function() {
	arrow_right.src = "img/arrow_right.png";
}

var dd = document.getElementsByClassName("choose")[0].getElementsByTagName("dd");

for (var i = 0; i < dd.length; i++) {
	dd[i].onclick = function() {
		if (!this.hasAttribute("class")) {
			this.className = "active";
		} else {
			this.attributes.removeNamedItem("class");
			return false;
		}
	}
}

var tabs = document.getElementsByClassName("tabs")[0].getElementsByTagName("span");
var details = document.getElementsByClassName("details")[0];
var evalution = document.getElementsByClassName("evalution")[0];
tabs[0].onclick = function() {
	details.style.display = "block";
	evalution.style.display = "none";
	tabs[0].className = "pro_detail"
	tabs[1].className = "comment"
	this.className += " on";
}

tabs[1].onclick = function() {
	details.style.display = "none";
	evalution.style.display = "block";
	tabs[0].className = "pro_detail"
	tabs[1].className = "comment"
	this.className += " on";
}

var img_list = document.getElementsByClassName("thumb")[0].getElementsByTagName("ul")[0].getElementsByTagName("img");
for (var i = 0; i < img_list.length; i++) {
	img_list[i].onclick = function() {
		var big_img = document.getElementsByClassName("big")[0].getElementsByTagName("img")[0];
		big_img.setAttribute("src", this.getAttribute("src"));
		for (var j = 0; j < img_list.length; j++) {
			img_list[j].parentNode.className = "";
		}
		this.parentNode.className = "turn";
	}
}

var big = document.getElementsByClassName("big")[0];
var box1 = document.getElementsByClassName("box1")[0];
var original = document.getElementsByClassName("original")[0];
var img = document.createElement("img");
img.style.position = "absolute";
img.setAttribute("width", "1880px");
img.setAttribute("height", "1425.770px");
img.style.zIndex = "10";
original.appendChild(img);
big.onmouseover = function() {
	box1.style.display = "block";
	original.style.display = "block";
	img.src = big.getElementsByTagName("img")[0].src;
}

big.onmouseout = function() {
	box1.style.display = "none";
	original.style.display = "none";
}

big.onmousemove = function(e) {
	e = event || window.event;
	var imgX = e.pageX;
	var imgY = e.pageY;
	var bigLeft = big.offsetLeft;
	var bigTop = big.offsetTop;
	var box1Left = imgX - bigLeft - box1.offsetWidth / 2;
	var box1Top = imgY - bigTop - box1.offsetHeight / 2;
	if (box1Left < 0) {
		box1Left = 0;
	} else if (box1Left > big.offsetWidth - box1.offsetWidth) {
		box1Left = big.offsetWidth - box1.offsetWidth;
	}
	if (box1Top < 0) {
		box1Top = 0;
	} else if (box1Top > big.offsetHeight - box1.offsetHeight) {
		box1Top = big.offsetHeight - box1.offsetHeight;
	}
	box1.style.left = box1Left + "px";
	box1.style.top = box1Top + "px";
	var count = img.offsetWidth / big.getElementsByTagName("img")[0].offsetWidth;
	img.style.left = -box1Left * count + "px";
	img.style.top = -box1Top * count + "px";

}

var add = document.getElementsByClassName("add")[0];
var reduce = document.getElementsByClassName("reduce")[0];
var num = document.getElementsByClassName("quantity_num")[0];
var pro_num = parseInt(num.value);
var oldCount;
add.onclick = function() {
	pro_num = parseInt(num.value);
	pro_num += 1;
	num.value = pro_num;
}

reduce.onclick = function() {
	pro_num = parseInt(num.value);
	pro_num -= 1;
	if (pro_num <= 1) {
		pro_num = 1;
	}
	num.value = pro_num;
}

num.onfocus = function() {
	oldCount = this.value;
}

num.onchange = function() {
	if (oldCount < 1) {
		this.value = 1;
	} else if (isNaN(this.value)) {
		this.value = oldCount;
	} else if (this.value == 0){
		this.value = 1;
	}
}

function setProduct() {
	var imgSrc = ["img/pi0.jpg", "img/pi1.jpg", "img/pi2.jpg",
		"img/pi3.jpg", "img/pi4.jpg"
	];
	var id = parseInt(Math.random() * 4);
	var img = imgSrc[id];
	var num = document.getElementsByClassName("quantity_num")[0].value;
	var price = (199.9).toFixed(2);

	var product = {
		imgSrc: img,
		num: num,
		price: price,
		id: id,
		totalPrice: (price * num).toFixed(2)
	}
	addShopCar(product);
}

$(function() {
	$(".right").click(function() {
		var len = $(".thumb li").length;

		var ilen = 3;
		var iwidth = 184;
		var left = (len - ilen) * -iwidth;

		$(".thumb ul").animate({
			marginLeft: left + "px"
		})
	})

	$(".left").click(function() {
		$(".thumb ul").animate({
			marginLeft: "0px"
		})

	})

})